<!DOCTYPE html>
<html lang="zh-CN">

<!-- Mirrored from www.mdui.org/docs/appbar/demo4 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 22 Jan 2022 13:02:58 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="renderer" content="webkit"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=5.0">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <title>应用栏 - 含工具栏和 Tab 选项卡 - MDUI 框架示例,Material Design 示例</title>
  
  <link rel="preconnect" href="http://cdn.w3cbus.com/">
  <link rel="stylesheet" href="../../../cdn.w3cbus.com/library/mdui/1.0.2/css/mdui.min.css"><link rel="stylesheet" href="../../../cdn.w3cbus.com/pages/html_demo/static/index.41c900a2.css">
  
  <!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  '../../../www.googletagmanager.com/gtm5445.html?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-K3T2R6S');</script>
  <!-- End Google Tag Manager -->
  <script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"mdui官网","item":"https://www.mdui.org"},{"@type":"ListItem","position":2,"name":"mdui v1文档","item":"https://www.mdui.org/docs/"},{"@type":"ListItem","position":3,"name":"应用栏","item":"https://www.mdui.org/docs/appbar"},{"@type":"ListItem","position":4,"name":"应用栏 - 含工具栏和 Tab 选项卡"}]}</script>
  <script async src="../../../pagead2.googlesyndication.com/pagead/js/adsbygooglee7db.js?client=ca-pub-4466345895756968" crossorigin="anonymous"></script>
</head>
<body><!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K3T2R6S"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="preview"></div>
<div class="editor">

  <div class="controls">
    <div class="
      control-html
      mdui-ripple
      control-active"
    >HTML</div>
    <div class="
      control-css
      mdui-ripple
      "
    >CSS</div>
    <div class="
      control-javascript
      mdui-ripple
      "
    >JavaScript</div>
    <div class="control-drag"></div>
    <div
      class="control-run mdui-btn mdui-btn-icon mdui-ripple mdui-text-color-theme-secondary"
      mdui-tooltip="{content: '运行 Ctrl + Enter'}"
    >
      <mdui-icon-play-arrow class="mdui-icon"></mdui-icon-play-arrow>
    </div>
    <label
      class="control-live-mode mdui-switch"
      mdui-tooltip="{content: '实时预览'}"
    >
      <input type="checkbox" checked/>
      <i class="mdui-switch-icon"></i>
    </label>
  </div>

  <div class="code code-html">
    <div class="code-label">HTML</div>
    <pre id="ace-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
  &lt;title&gt;应用栏 - 含工具栏和 Tab 选项卡&lt;/title&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.w3cbus.com/library/mdui/1.0.2/css/mdui.min.css&quot;/&gt;
&lt;/head&gt;
&lt;body&gt;

  &lt;div class=&quot;mdui-appbar&quot;&gt;
    &lt;div class=&quot;mdui-toolbar mdui-color-indigo&quot;&gt;
      &lt;a href=&quot;javascript:;&quot; class=&quot;mdui-btn mdui-btn-icon&quot;&gt;&lt;i class=&quot;mdui-icon material-icons&quot;&gt;menu&lt;/i&gt;&lt;/a&gt;
      &lt;a href=&quot;javascript:;&quot; class=&quot;mdui-typo-title&quot;&gt;Title&lt;/a&gt;
      &lt;div class=&quot;mdui-toolbar-spacer&quot;&gt;&lt;/div&gt;
      &lt;a href=&quot;javascript:;&quot; class=&quot;mdui-btn mdui-btn-icon&quot;&gt;&lt;i class=&quot;mdui-icon material-icons&quot;&gt;search&lt;/i&gt;&lt;/a&gt;
      &lt;a href=&quot;javascript:;&quot; class=&quot;mdui-btn mdui-btn-icon&quot;&gt;&lt;i class=&quot;mdui-icon material-icons&quot;&gt;refresh&lt;/i&gt;&lt;/a&gt;
      &lt;a href=&quot;javascript:;&quot; class=&quot;mdui-btn mdui-btn-icon&quot;&gt;&lt;i class=&quot;mdui-icon material-icons&quot;&gt;more_vert&lt;/i&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mdui-tab mdui-color-indigo&quot; mdui-tab&gt;
      &lt;a href=&quot;#tab1&quot; class=&quot;mdui-ripple mdui-ripple-white&quot;&gt;
        &lt;i class=&quot;mdui-icon material-icons&quot;&gt;phone&lt;/i&gt;
        &lt;label&gt;recents&lt;/label&gt;
      &lt;/a&gt;
      &lt;a href=&quot;#tab2&quot; class=&quot;mdui-ripple mdui-ripple-white&quot;&gt;
        &lt;i class=&quot;mdui-icon material-icons&quot;&gt;favorite&lt;/i&gt;
        &lt;label&gt;favorites&lt;/label&gt;
      &lt;/a&gt;
      &lt;a href=&quot;#tab3&quot; class=&quot;mdui-ripple mdui-ripple-white&quot;&gt;
        &lt;i class=&quot;mdui-icon material-icons&quot;&gt;perm_contact_calendar&lt;/i&gt;
        &lt;label&gt;nearby&lt;/label&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class=&quot;mdui-container-fluid&quot;&gt;
    &lt;div id=&quot;tab1&quot;&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
      &lt;p&gt;tab 1&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id=&quot;tab2&quot;&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
      &lt;p&gt;tab 2&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id=&quot;tab3&quot;&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
      &lt;p&gt;tab 3&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;script src=&quot;https://cdn.w3cbus.com/library/mdui/1.0.2/js/mdui.min.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
  </div>
  <div class="code code-css">
    <div class="code-label">CSS</div>
    <pre id="ace-css"></pre>
  </div>
  <div class="code code-javascript">
    <div class="code-label">JavaScript</div>
    <pre id="ace-javascript"></pre>
  </div>

</div>
<script src="../../../cdn.w3cbus.com/library/mdui/1.0.2/js/mdui.min.js"></script><script src="../../../cdn.w3cbus.com/library/ace/1.4.13/ace.js"></script><script src="../../../cdn.w3cbus.com/library/ace/1.4.13/ext-language_tools.js"></script><script src="../../../cdn.w3cbus.com/pages/html_demo/static/index.b9b553b1.js"></script>
